<template>
	<view class="chat-message">
		<view
			class="chat-message-item"
			v-for="(item, index) in list"
			:key="index"
			:class="[item.isSelf ? `is-right` : `is-left`]"
		>
			<text class="date">{{ item.time }}</text>

			<view class="main">
				<view class="avatar" @tap="toUserDetail(item)">
					<u-avatar :src="item.isSelf?user.figureurl:receive.figureurl"></u-avatar>
				</view>

				<view class="det">
					<text class="name">{{ item.isSelf?user.nickname:receive.nickname }}</text>

					<view class="content" :class="[`is-${item.type}`]" @tap="tapItem(item)">
						<template v-if="item.type === 'text'">
							<meg-text :message="item.message"></meg-text>
						</template>

						<template v-else-if="item.type === 'image'">
							<meg-img :item="item"></meg-img>
						</template>

						<template v-else-if="item.type === 'voice'">
							<meg-voi :item='item'></meg-voi>
						</template>

						<template v-else-if="item.type === 'video'">
							<view class="video-btn">
								<image class="cover" :src="item.src+'?x-oss-process=video/snapshot,t_1500,f_jpg,w_300,h_200,m_fast'" />
								<text class="iconfont icon-play"></text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<u-modal 
			v-model="video.visible"
			force-update
			@cancel="onVideoClose"
		>
			<video id="video" autoplay :src="video.url"></video>
		</u-modal>
	</view>
</template>

<script>
import MessageText from './message-text.vue'
import MessageImage from './message-image.vue'
import MessageVoice from './message-voice.vue'
export default {
	components:{
		'meg-text':MessageText,
		'meg-img':MessageImage,
		'meg-voi':MessageVoice
	},
	props: {
		list: Array,
		//接收方
		receive:{
			type:Object,
			default:()=>{return{}}
		},
		user:{
			type:Object,
			default:()=>{return{}}
		}
	},

	data() {
		return {
			video: {
				visible: false,
				url: ''
			},
			thumbnail:'',//视频略图
			voicePlay:null,//当前播放对象
			onVoicePlay:false,
			VOICE:null,
			progress:0
			
		};
	},
	created:function(){
		this.VOICE=uni.createInnerAudioContext();
		this.VOICE.onCanplay(()=>{
			this.VOICE.play()
		});
		this.VOICE.onPause(()=>{
			//console.log('onPause')
			this.onVoicePlay=false
			if(this.voicePlay){
				this.$set(this.voicePlay,'currentTime',this.VOICE.currentTime)
				this.$set(this.voicePlay,'play',false)
			}
		});
		this.VOICE.onEnded(()=>{
			if(this.voicePlay){
				this.$set(this.voicePlay,'play',false)
			}
			
			//console.log('onEnded')
		});
		this.VOICE.onStop(()=>{
			if(this.voicePlay){
				this.$set(this.voicePlay,'play',false)
			}
			//console.log('onStop')
		});
		this.VOICE.onError(()=>{
			
		});
		this.VOICE.onTimeUpdate(()=>{
			let progress=this.VOICE.currentTime/this.VOICE.duration*100
			this.$set(this.voicePlay,'progress',progress)
			if(!this.voicePlay.play){
				this.$set(this.voicePlay,'play',true)
			}
		});
	},
	destroyed:function(){
		this.VOICE.destroy()
	},
	methods: {
		tapItem(item) {
			switch (item.type) {
				case 'text':
					break;
				case 'image':
					uni.previewImage({
						current: item.url,
						urls: [item.url]
					});
					break;
				case 'video':
					this.video.url = item.url;
					this.video.visible = true;
					break;
				case 'voice':
					this.playVoice(item);
					break;
					
			}
		},
		
		playVoice(item){
			if(this.voicePlay === item){//点击击对像为当前播放对像
				//console.log('有对像')
				if(this.VOICE.paused){//是否暂停或停止
					//console.log('正在播')
					this.VOICE.play()
					if(this.voicePlay.currentTime){ //是否有播放时间
						this.VOICE.seek(this.voicePlay.currentTime)
					}
				}else{
					//console.log('暂停了')
					this.VOICE.pause()
				}
				
			}else{//点击击对像不为当前播放对像 重新加载
				//console.log('没有对像或对像不同')
				this.VOICE.stop()
				this.voicePlay=item
				this.onVoicePlay=true
				this.VOICE.src=item.url
				if(this.voicePlay.currentTime){
					this.VOICE.seek(this.voicePlay.currentTime)
				}
				
			}			
		},

		toUserDetail() {
			/* uni.navigateTo({
				url: '/pages/user/detail'
			}); */
		},

		onVideoClose() {
			const video = uni.createVideoContext('video');
			video.pause();
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-message {
	&-item {
		font-size: 26rpx;
		padding: 20rpx;

		.date {
			display: block;
			text-align: center;
			margin: 20rpx 0;
			font-size: 24rpx;
		}

		.main {
			display: flex;

			.avatar {
				flex-shrink: 0;
				height: 80rpx;
			}

			.det {
				display: flex;
				flex-direction: column;
				max-width: 60%;

				.name {
					margin-bottom: 10rpx;
				}

				.content {
					display: inline-block;
					border-radius: 16rpx;
					box-sizing: border-box;

					&.is-text,
					&.is-voice {
						padding: 20rpx;
						line-height: 40rpx;
						letter-spacing: 1rpx;
					}

					&.is-image {
						image {
							max-height: 165px;
							max-width: 165px;
							border-radius: 16rpx;
						}
					}

					&.is-voice {
						display: flex;
						align-items: center;
						/* width: 130rpx; */

						.icon-voice {
							font-size: 50rpx;
						}
					}

					&.is-video {
						.video-btn {
							height: 300rpx;
							width: 500rpx;
							text-align: center;
							line-height: 300rpx;
							border-radius: 16rpx;
							background-color: #000;
							position: relative;
							overflow: hidden;

							.cover {
								height: 100%;
								width: 100%;
								position: absolute;
								left: 0;
								top: 0;
							}

							.iconfont {
								color: #fff;
								font-size: 100rpx;
								position: relative;
							}
						}
					}

					&:active {
						opacity: 0.9;
					}
				}
			}
		}

		&.is-left {
			.det {
				margin-left: 20rpx;
				align-items: flex-start;

				.content {
					&.is-text,
					&.is-voice {
						border-top-left-radius: 0;
						background-color: #f6f7f9;
					}

					&.is-voice {
						justify-content: flex-start;
					}
				}
			}
		}

		&.is-right {
			.main {
				flex-direction: row-reverse;
			}

			.det {
				margin-right: 20rpx;
				align-items: flex-end;

				.content {
					&.is-text,
					&.is-voice {
						border-top-right-radius: 0;
						background-color: #ffc100;
					}

					&.is-voice {
						justify-content: flex-end;
					}
				}
			}
		}
	}
}
</style>
